<!DOCTYPE html>
<html lang="en">

<head>
	#include("./common/head.htm")
</head>

<body>
	#include("./common/header.htm")
	<div id="mainBody">
		<div class="container">
			<div class="row">
				#include("./common/sidebar.htm")
				<div class="span9" id="showItems">
					<ul class="breadcrumb">
						<li><a href="index.html">首页</a> <span class="divider">/</span></li>
						<li class="active">{{ keyword }}</li>
					</ul>
					<h3> 包含“{{ keyword }}”的商品 <small class="pull-right"> 搜索到 {{ info.total }}件商品</small></h3>
					<hr class="soft" />
					<hr class="soft" />
					<form class="form-horizontal span6">
						<div class="control-group">
							<label class="control-label alignL">分类： </label>
							<select v-model="sortby" @change="updateList">
								<option :value="0">默认排序</option>
								<option :value="1">商品名字典序正序</option>
								<option :value="2">商品名字典序逆序</option>
								<option :value="3">商品价格正序</option>
								<option :value="4">商品价格逆序</option>
								<option :value="5">商品存量正序</option>
								<option :value="6">商品存量逆序</option>
							</select>
						</div>
					</form>

					<div id="myTab" class="pull-right">
						<a href="#listView" data-toggle="tab" @click="toListView()"><span id="listSpan" class="btn btn-large"><i
									class="icon-list"></i></span></a>
						<a href="#blockView" data-toggle="tab" @click="toBlockView()"><span id="blockSpan" class="btn btn-large btn-primary"><i
									class="icon-th-large"></i></span></a>
					</div>
					<br class="clr" />
					<div class="tab-content">
						<div class="tab-pane" id="listView">
							<div v-for="product in productList">
								<div class="row">
									<div class="span2">
										<img v-bind:src="product.src" alt="" />
									</div>
									<div class="span4">
										<h3>新品！</h3>
										<hr class="soft" />
										<h5>{{ product.description }}</h5>
										<p>
										</p>
										<a class="btn btn-small pull-right"
											:href="'product_details.html?itemid='+product.id">查看详情</a>
										<br class="clr" />
									</div>
									<div class="span3 alignR">
											<h3>{{ product.price.toFixed(2) }}元</h3>
											<!-- <label class="checkbox">
				<input type="checkbox">  Adds product to compair
			</label><br/> -->

											<button @click="addToCart(product.id)" class="btn btn-large btn-primary"> 添加购物车 <i
													class=" icon-shopping-cart"></i></button>
											<a :href="'product_details.html?itemid='+product.id"
												class="btn btn-large"><i class="icon-zoom-in"></i></a>

									</div>
								</div>
								<hr class="soft" />
							</div>
						</div>

						<div class="tab-pane  active" id="blockView">
							<ul class="thumbnails">
								<li class="span3" v-for="product in productList">
									<div class="thumbnail">
										<a :href="'product_details.html?itemid='+product.id"><img
												v-bind:src="product.src" style="height: 300px;" alt="" /></a>
										<div class="caption">
											<p style="white-space: nowrap;overflow: hidden;text-emphasis: ellipsis"
												:title="product.description">
												{{ product.description }}
											</p>
											<h4 style="text-align:center"><a class="btn"
													:href="'/view/product_details.html?itemid='+product.id"> <i
														class="icon-zoom-in"></i></a>
												<button class="btn" @click="addToCart(product.id)">添加<i
														class="icon-shopping-cart"></i></button>
												<a class="btn btn-primary"
													:href="'/view/product_details.html?itemid='+product.id">{{
													product.price.toFixed(2) }}元</a>
											</h4>
										</div>
									</div>
								</li>
							</ul>
							<hr class="soft" />
						</div>
					</div>

					<!-- <a href="compair.html" class="btn btn-large pull-right">Compair Product</a> -->
					<div class="pagination">
						<ul>
							<li><a href="javascript:void(0)" @click.prevent="backpage()">&lsaquo;</a></li>
							<li v-for="count in pagesequence">
								<a v-if="count === currentpage" href="javascript:void(0)">{{count}}</a>
								<a v-else href="javascript:void(0)" @click="toPage(count)">{{count}}</a>
							</li>
							<li><a href="javascript:void(0)" @click.prevent="nextpage()">&rsaquo;</a></li>
						</ul>
					</div>
					<br class="clr" />
				</div>
			</div>
		</div>
	</div>
	<!-- MainBody End ============================= -->
	#include("./common/footer.htm")
</body>

</html>